#iChannel0 "./image-1.png"
#iChannel1 "./apex.jpg"

highp float random(vec2 co)
{
    highp float a=12.9898;
    highp float b=78.233;
    highp float c=43758.5453;
    highp float dt=dot(co.xy,vec2(a,b));
    highp float sn=mod(dt,3.14);
    return fract(sin(sn)*c);
}

vec3 mod289(vec3 x)
{
    return x-floor(x*(1./289.))*289.;
}

vec4 mod289(vec4 x)
{
    return x-floor(x*(1./289.))*289.;
}

vec4 permute(vec4 x)
{
    return mod289(((x*34.)+1.)*x);
}

vec4 taylorInvSqrt(vec4 r)
{
    return 1.79284291400159-.85373472095314*r;
}

vec3 fade(vec3 t){
    return t*t*t*(t*(t*6.-15.)+10.);
}

// Classic Perlin noise
float cnoise(vec3 P)
{
    vec3 Pi0=floor(P);// Integer part for indexing
    vec3 Pi1=Pi0+vec3(1.);// Integer part + 1
    Pi0=mod289(Pi0);
    Pi1=mod289(Pi1);
    vec3 Pf0=fract(P);// Fractional part for interpolation
    vec3 Pf1=Pf0-vec3(1.);// Fractional part - 1.0
    vec4 ix=vec4(Pi0.x,Pi1.x,Pi0.x,Pi1.x);
    vec4 iy=vec4(Pi0.yy,Pi1.yy);
    vec4 iz0=Pi0.zzzz;
    vec4 iz1=Pi1.zzzz;

    vec4 ixy=permute(permute(ix)+iy);
    vec4 ixy0=permute(ixy+iz0);
    vec4 ixy1=permute(ixy+iz1);

    vec4 gx0=ixy0*(1./7.);
    vec4 gy0=fract(floor(gx0)*(1./7.))-.5;
    gx0=fract(gx0);
    vec4 gz0=vec4(.5)-abs(gx0)-abs(gy0);
    vec4 sz0=step(gz0,vec4(0.));
    gx0-=sz0*(step(0.,gx0)-.5);
    gy0-=sz0*(step(0.,gy0)-.5);

    vec4 gx1=ixy1*(1./7.);
    vec4 gy1=fract(floor(gx1)*(1./7.))-.5;
    gx1=fract(gx1);
    vec4 gz1=vec4(.5)-abs(gx1)-abs(gy1);
    vec4 sz1=step(gz1,vec4(0.));
    gx1-=sz1*(step(0.,gx1)-.5);
    gy1-=sz1*(step(0.,gy1)-.5);

    vec3 g000=vec3(gx0.x,gy0.x,gz0.x);
    vec3 g100=vec3(gx0.y,gy0.y,gz0.y);
    vec3 g010=vec3(gx0.z,gy0.z,gz0.z);
    vec3 g110=vec3(gx0.w,gy0.w,gz0.w);
    vec3 g001=vec3(gx1.x,gy1.x,gz1.x);
    vec3 g101=vec3(gx1.y,gy1.y,gz1.y);
    vec3 g011=vec3(gx1.z,gy1.z,gz1.z);
    vec3 g111=vec3(gx1.w,gy1.w,gz1.w);

    vec4 norm0=taylorInvSqrt(vec4(dot(g000,g000),dot(g010,g010),dot(g100,g100),dot(g110,g110)));
    g000*=norm0.x;
    g010*=norm0.y;
    g100*=norm0.z;
    g110*=norm0.w;
    vec4 norm1=taylorInvSqrt(vec4(dot(g001,g001),dot(g011,g011),dot(g101,g101),dot(g111,g111)));
    g001*=norm1.x;
    g011*=norm1.y;
    g101*=norm1.z;
    g111*=norm1.w;

    float n000=dot(g000,Pf0);
    float n100=dot(g100,vec3(Pf1.x,Pf0.yz));
    float n010=dot(g010,vec3(Pf0.x,Pf1.y,Pf0.z));
    float n110=dot(g110,vec3(Pf1.xy,Pf0.z));
    float n001=dot(g001,vec3(Pf0.xy,Pf1.z));
    float n101=dot(g101,vec3(Pf1.x,Pf0.y,Pf1.z));
    float n011=dot(g011,vec3(Pf0.x,Pf1.yz));
    float n111=dot(g111,Pf1);

    vec3 fade_xyz=fade(Pf0);
    vec4 n_z=mix(vec4(n000,n100,n010,n110),vec4(n001,n101,n011,n111),fade_xyz.z);
    vec2 n_yz=mix(n_z.xy,n_z.zw,fade_xyz.y);
    float n_xyz=mix(n_yz.x,n_yz.y,fade_xyz.x);
    return 2.2*n_xyz;
}

/* --------------------------------------------------------- */
// 转场
vec4 getFromColor(vec2 uv){
    return texture(iChannel0,uv);
}

vec4 getToColor(vec2 uv){
    return texture(iChannel1,uv);
}

float sdCircle(vec2 p,float r)
{
    return length(p)-r;
}

float sdBox( in vec2 p, in vec2 rect ) {
    vec2 d = abs(p) - rect;
    
    return length(max(d, 0.0)) + min(max( d.x, d.y ), 0.0);
}
vec4 transitionOriginal(vec2 uv){
    float progress=iMouse.x/iResolution.x;
    float ratio=iResolution.x/iResolution.y;

    vec2 p=uv;
    p-=.5;
    p.x*=ratio;

    float noise=cnoise(vec3(p*10.,0.));
    float pr=progress+noise*.1;

    float d=sdCircle(p,pr*sqrt(2.4));
    float c=smoothstep(-.1,-.05,d);

    return mix(getFromColor(uv),getToColor(uv),1.-c);
}

vec4 transition(vec2 uv){
    float progress=iMouse.x/iResolution.x * .8;
    float ratio=iResolution.x/iResolution.y;

    vec2 p=uv;
    // p-=.5;       // 已经做了原点移动 此处可以修改transition起点
    // p.x*=ratio;     // 已经做了宽高比例调整 不需要再 *ratio

    float noise=cnoise(vec3(p*10.,0.));
    float pr=progress+noise*.1;

    // float d=sdCircle(p,pr*sqrt(2.4));       // SDF 
    float d=sdBox(p, vec2( pr ));       // SDF 
    float c=smoothstep(-.1,-.05,d);         // 柔和边缘

    // return mix(getFromColor(uv),getToColor(uv),1.-c);
    return mix(getFromColor(uv),getToColor(uv),c);
}

vec4 transition_progress( vec2 uv, float progress ) {
    // float progress=iMouse.x/iResolution.x * .8;
    float ratio=iResolution.x/iResolution.y;

    vec2 p=uv;
    // p-=.5;       // 已经做了原点移动 此处可以修改transition起点
    p.x*=ratio;

    float noise=cnoise(vec3(p*10.,0.));
    float pr=progress+noise*.1;

    float d=sdCircle(p, pr * 1.549 );   // sqrt(2.4) = 1.549
    float c=smoothstep(-.1, -.05, d);

    return mix(getFromColor(uv),getToColor(uv),1.-c);
}

/* --------------------------------------------------------- */
void main() {
    vec2 uv = ( gl_FragCoord.xy - iResolution.xy*0.5 ) / iResolution.xx;

    // Perlin Noise
    // float noise = cnoise( vec3( uv.x + iTime*0.1, uv.y, 0.0));
    // vec4 textureColor = texture( iChannel1, uv );
    // gl_FragColor = vec4( vec3( noise - 0.5 )*0.7 + textureColor.rgb, 1.0 );

    vec4 color = transition( uv );
    gl_FragColor = color;

    return;
}